<template >
   <div style="padding: 30px; box-sizing: border-box;">
      <searchForm  :formData="formData"></searchForm>
      <div class="btn_wrap">

         <el-button type="primary" @click="jobFlag=true">新增</el-button>
         <el-button type="warning" >修改</el-button>
         <el-button type="danger" >删除</el-button>
         <el-button type="primary" >导出</el-button>
         <el-button type="info" >日志</el-button>
      </div>
      <div>
         <commonTable :tableData="jobList" :columnData="columnData">
           <template #status="{row}">
             <el-switch v-model="row.status"></el-switch>
           </template>
           <template #action="{row}">
              <el-link type="primary" @click="toEdit(row.jobId)">修改</el-link>
              <el-link style="margin:0 10px;" type="primary" @click="toDel(row.jobId)">删除</el-link>
              <el-dropdown trigger="hover">
               <el-link type="primary">更多</el-link>
               <template #dropdown>
                <el-dropdown-item  @click="toChange(row)" commond="now">立即执行</el-dropdown-item>
                <el-dropdown-item commond="info">详情</el-dropdown-item>
                <el-dropdown-item commond="log">调度日志</el-dropdown-item>
               </template>
              </el-dropdown>
           </template>
         </commonTable>
      </div>
      <!-- 弹出层 -->
       <el-dialog title="添加任务" v-model="jobFlag" width="70%">
         <el-form :model="formObj">
            <el-row>
              <el-col :span="12">
                <el-form-item label="任务名称">
                  <el-input v-model="formObj.jobName"></el-input>
                </el-form-item>
              </el-col>
               <el-col :span="12">
                <el-form-item label="任务分组">
                  <el-select v-model="formObj.jobGroup" placeholder="请选择">
                    <el-option label="系统" value="system"></el-option>
                    <el-option label="默认" value="default"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="调用的方法">
                  <el-input v-model="formObj.invokeTarget"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item  label="cron表达式
">    
                  <div style="display: flex;">
                    <el-input  style="width: 400px;" v-model="formObj.cronExpression"></el-input>
                    <el-button @click="openCron" type="info">生成cron表达式</el-button>
                 </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="执行策略
">
        <el-radio-group v-model="formObj.misfirePolicy" size="large">
        <el-radio-button label="立即执行" value="1" />
        <el-radio-button label="执行一次" value="2" />
        <el-radio-button label="放弃执行" value="3" />
       
      </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否并发">
                    <el-radio-group 
                    v-model="formObj.concurrent" size="large">
                    <el-radio-button value="0" label="允许"  />
                    <el-radio-button value="1" label="禁止"  />
       
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
         </el-form>
            <template #footer>
                <el-button @click="toSave" type="primary">确定</el-button>
                <el-button @click="jobFlag=false">取消</el-button>
            </template>
       </el-dialog> 
       <el-dialog title="生成cron表达式" v-model="cronFlag" width="70%">
         <!-- <cronCom></cronCom> -->
          <cronTab @fill="getCron"></cronTab> 
       </el-dialog>
   </div>
 </template>
 <script setup>
     import {ref,reactive,watch} from 'vue'
     import cronTab from '@/components/cronTab/index.vue'
     import cronCom from '@/components/cronCom/index.vue'
     import jobHook from './child/jobHook'
   import {addJob,getJob,updateJob,delJob,runJob} from '@/api/monitor/job'
   import { ElMessage } from 'element-plus'

  let {formData,jobList,columnData,getList}= jobHook()
getList();
let jobFlag=ref(false)
let cronFlag=ref(false)

let openCron=()=>{
  cronFlag.value=true
}
let formObj=reactive({
  jobName:'',
  jobGroup:'',
  invokeTarget:"",
  cronExpression:"",
  misfirePolicy:"1" ,//执行策略
  concurrent:0,//是否并发
})
let getCron=(cron)=>{ //子传父获取cron表达式
  console.log(cron);
  formObj.cronExpression=cron
  cronFlag.value=false
}
// 添加和修改
let toSave=async ()=>{
  if(formObj.jobId){
   let editRes=await updateJob(formObj)
   console.log(editRes)
  }else{
    let res=await addJob(formObj)
    console.log(res)
  }

  jobFlag.value=false;
  getList();
}
let toEdit=async (id)=>{
   jobFlag.value=true;
    let res=await getJob(id)
    console.log(res);
    formObj.concurrent=res.data.concurrent
    formObj.cronExpression=res.data.cronExpression
    formObj.invokeTarget=res.data.invokeTarget
    formObj.jobGroup=res.data.jobGroup
    formObj.jobName=res.data.jobName
    formObj.misfirePolicy=res.data.misfirePolicy
    formObj.jobId=res.data.jobId
    formObj.status=res.data.status //修改多传的状态
}
watch(()=>jobFlag.value,(newVal)=>{
  if(!newVal){
    formObj.concurrent=''
    formObj.cronExpression=''
    formObj.invokeTarget=""
    formObj.jobGroup=''
    formObj.jobName=''
    formObj.misfirePolicy=''
    formObj.jobId=''
  }
})
let toDel=async (id)=>{
  let res=await delJob(id)
  getList()
}
// 立即执行一次
let toChange= async (row)=>{
  // runJob
  console.log(row,"--------")
  let res=await runJob(row.jobId,row.jobGroup)
  console.log(res,"----")
  ElMessage.success("立即执行成功")
  getList();
}
 </script>